<template>
  <div id="container" class="map"></div>
</template>

<script>
/* eslint-disable */
import linesData from './lines-data.json'
import mapConfig from './map-config.json'
import * as L7 from '@antv/l7'

export default {
  name: 'tw-map',
  data () {
    return {
      chart: '',
      bmap: {},
      linesSeries: [],
      scatterSeries: [],
      effectScatterSeries: [],
      mapZoom: 6,
      trainIcon: ``
    }
  },
  mounted () {
    this.initMap()
  },
  methods: {
    initMap () {
      let vm = this
      vm.axios.get(`${process.env.BASE_URL}json/tourist_attractions.json`, {
        baseURL: ''
      }).then((resp) => {
        // console.log('data', resp.data)
          var map = new AMap.Map('container', {
              viewMode: '3D',
              mapStyle: 'amap://styles/ed3949fcc58f08e9e8b692f949c6137d',
              pitch: 60,
              features: ['bg', 'road'],
              zoom: 13,
              center: [120.153576, 30.327459],
              skyColor: '#05388f'
          });

          // 设置光照
          map.AmbientLight = new AMap.Lights.AmbientLight([1, 1, 1], 0.5);
          map.DirectionLight = new AMap.Lights.DirectionLight([0, 0, 1], [1, 1, 1], 1);

          var object3Dlayer = new AMap.Object3DLayer();
          map.add(object3Dlayer);

          new AMap.DistrictSearch({
              subdistrict: 0,   //返回下一级行政区
              extensions: 'all',  //返回行政区边界坐标组等具体信息
              level: 'city'  //查询行政级别为 市
          }).search('拱墅区', function (status, result) {

              var bounds = result.districtList[0].boundaries;
              // console.log(bounds)
              var height = 2000;
              var color = '#0054e5bb'; // rgba
              var prism = new AMap.Object3D.Prism({
                path: bounds,
                height: height,
                color: color
              });

              prism.transparent = true;
              object3Dlayer.add(prism);

              // var text = new AMap.Text({
              //     text: result.districtList[0].name + '</br>(' + result.districtList[0].adcode + ')',
              //     verticalAlign: 'bottom',
              //     position: [120.153576, 30.327459],
              //     height: 5000,
              //     style: {
              //         'background-color': 'transparent',
              //         '-webkit-text-stroke': 'red',
              //         '-webkit-text-stroke-width': '0.5px',
              //         'text-align': 'center',
              //         'border': 'none',
              //         'color': 'white',
              //         'font-size': '12px',
              //         'font-weight': 600
              //     }
              // });

              // text.setMap(map);
              var overlayGroups = null
              vm.axios.get(`${process.env.BASE_URL}json/gongshudata.json`, {
                baseURL: ''
              }).then((data) => {
                // console.log(data)
                let polygon = []
                let path = []
                data.data.forEach((item, index) => {
                  let b = []
                  item.lnglat.forEach(i => {
                    let a = new AMap.LngLat(i[0], i[1])
                    b.push(a)
                    //  .push(a)
                  })
                  path[index] = b
                  polygon[index] = new AMap.Polygon({
                    path: path[index],
                    strokeColor: "#07ffff",
                    fillOpacity: 0.5,
                    fillColor: '#07ffff'
                  });
                })
                overlayGroups = new AMap.OverlayGroup(polygon);
              })

              let scene = new L7.Scene({
                zoomControl: true,
                scaleControl: false,
                mapStyle: 'amap://styles/ed3949fcc58f08e9e8b692f949c6137d',
                map:map
              });

            //   // console.log(scene)
              scene.on('loaded', function() {
              var layer = scene.HeatmapLayer({
                zIndex: 2
              }).source(resp.data, {
                parser: {
                  type: 'json',
                  x: 'lng',
                  y: 'lat'
                },
                transforms: [{
                  type: 'hexagon',
                  size: 50,
                  field: 'count',
                  method: 'sum'
              }]
              }).size('sum', function(value) {
                return value * 2;
              }).shape('hexagonColumn').style({
                coverage: 0.8,
                angle: 0
              }).color('sum', ["#fb6c84", "#ffea7f", "#00e2fe"]).render();

              layer.on('click', function(feature) {
                // console.log('ddd', feature)
                map.setZoom(16)
                map.setCenter([feature.lnglat.lng, feature.lnglat.lat])
                map.setFitView()
              });

              map.on('zoomchange', () => {
                let zoom = map.getZoom()
                if (zoom >= 15) {
                  object3Dlayer.remove(prism);
                  map.add(overlayGroups);
                } else {
                  object3Dlayer.add(prism);
                  map.remove(overlayGroups);
                }
              });
            });
          });
      }).catch((err) => {
        console.log(err)
      })
    },
    handleTouchMove () {}
  }
}
</script>

<style scoped>
.map {
  width: 100%;
  height: 100%;
}
</style>
